/**
 * Created by xiewei on 10/29/15.
 */
var imgDir = 'img/';
var topBannerHeight = 600;
var topBanner = $('#top-banner');
var mainContent = $('.main-content');
var bottomHeight = 519.323;
var carousel = $('.carousel');
var carouselItemImgs = carousel.find('.item>img');
var controlLeft = $('.carousel-control.left'),controlLeftBg = controlLeft.attr('style');
var controlRight = $('.carousel-control.right'),controlRightBg = controlRight.attr('style');
var controlImg = $('.carousel-control>img');
var security = $('.security');
//videos的效果
var center = $('#videoTitle');
var topleft = $('#video1');
var topright = $('#video2');
var bottomleft = $('#video4');
var bottomright = $('#video3');
var smallMedia = false;//屏幕是否为小屏
var stepText = {
    1 : ['Step 1','下载小狗在家App'],
    2 : ['Step 2','选择心仪的寄养家庭'],
    3 : ['Step 3','在线沟通一键下单'],
    4 : ['Step 4','实时追踪寄养动态']
}
/**
 * 获取屏幕宽度
 * @returns {Number}
 */
var getPageWidth = function(){
    return document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body.clientWidth;
}
/**
 * 获取屏幕宽高度
 * @returns {Number}
 */
var getPageHeight = function(){
    return document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body.clientHeight;
}
/**
 * 获取屏幕滚动高度
 * @returns {number}
 */
var getScrollTop = function(){
    return document.body.scrollTop == 0?document.documentElement.scrollTop:document.body.scrollTop;
}
/**
 * 视频重新开始播放
 */
var start = function(video){
    video.currentTime = 0;
    video.play();
}
/**
 * 视频停止播放 回到初始状态
 */
var stop = function(video){
    video.pause();
    video.currentTime = 0;
}
/**
 * 设置元素矩阵 兼容性
 * @param item
 * @param value
 */
var setMatric = function(item,value){
    $(item).css({
        '-webkit-transform': value,
        '-moz-transform': value,
        '-ms-transform': value,
        '-o-transform': value,
        'transform': value
    });
}
/**
 * step文字展示 逐字展示
 * @param item
 */
var showExplain = function(num,item,ifLeft){
    var h3Item = item.find('h3'),h3 = stepText[num][0];
    var pItem = item.find('p'),p = stepText[num][1];
    h3Item.text('').css({opacity: 1});
    pItem.text('').css({opacity: 1});
    item.show();
    //横线展开 从左往右:12em 从右往左:17em
    if(ifLeft){
        var hr = item.find('hr');
        var count = 1;//->17
        //初始状态
        hr.css({marginLeft: '17em'});
        var lineTimer = setInterval(function(){
            hr.animate({
                width: count+'em',
                marginLeft: (17-count)+'em'
            },30);
            if(count == 17){
                clearInterval(lineTimer);
            }
            count++;
        },30);
    }else{
        item.find('hr').animate({
            width: '12em'
        },500);
    }
    setTimeout(function(){
        item.css({backgroundColor: '#f6f6f6'});
        //文字逐字展示
        var i = 0,j = 0;
        var h3Timer = setInterval(function(){
            if(i < h3.length){
                i++;
                h3Item.text(h3.substring(0,i));
            }else{
                clearInterval(h3Timer);
            }
        },50);
        var pTimer = setInterval(function(){
            if(j < p.length){
                j++;
                pItem.text(p.substring(0,j));
            }else{
                clearInterval(pTimer);
            }
        },50);
    },250)
}
/**
 * 添加视频的mouse in/out
 * value1~value4 对应上左、上右、下左、下右的matrix值
 * value0 为中心banner的matrix值
 * 逆时针顺序设置
 */
//隐藏文字说明:去掉背景、线条、保留文字
var hideExplain = function(item){
    if(item && item.length>0){
        item.css({backgroundColor: 'transparent'}).hide();
        item.find('hr').css({width: 0});
        item.find('h3').css({opacity: 0});
        item.find('p').css({opacity: 0});
    }else{
        $('.video-explain').each(function(){
            if(!$(this).is(":hidden")){
                $(this).css({backgroundColor: 'transparent'}).hide();
                $(this).find('hr').css({width: 0});
                $(this).find('h3').css({opacity: 0});
                $(this).find('p').css({opacity: 0});
            }
        });
    }
}
//全部恢复:视频归位、step提示隐藏
var reset = function(){
    var value = 'matrix(1,0,0,1,0,0)';
    setMatric(center,value);
    setMatric(topleft,value);
    setMatric(bottomleft,value);
    setMatric(bottomright,value);
    setMatric(topright,value);
    hideExplain();
}
/**
 * 添加视频播放事件
 */
var topleftAction = function(){
    var value0,value1,value2,value3,value4;
    if(smallMedia){
        value1 = 'matrix(1.37142857,0,0,1.37142857,-15,0)';
        value0 = 'matrix(1,0,0,1,30,47)';
        value4 = 'matrix(0.92857143,0,0,0.92857143,40,40)';
        value3 = 'matrix(0.85714286,0,0,0.85714286,15,30)';
        value2 = 'matrix(1.21428571,0,0,1.21428571,50,25)';
    }else{
        value1 = 'matrix(1.37142857,0,0,1.37142857,0,45)';
        value0 = 'matrix(1,0,0,1,50,110)';
        value4 = 'matrix(0.92857143,0,0,0.92857143,75,100)';
        value3 = 'matrix(0.85714286,0,0,0.85714286,40,85)';
        value2 = 'matrix(1.21428571,0,0,1.21428571,95,80)';
    }
    setMatric(topleft,value1);
    setMatric(center,value0);
    setMatric(bottomleft,value4);
    setMatric(bottomright,value3);
    setMatric(topright,value2);

    var explain = topleft.next();
    showExplain(1,explain);
}
var toprightAction = function(){
    var value0,value1,value2,value3,value4;
    if(smallMedia){
        value2 = 'matrix(1.71428571,0,0,1.71428571,25,-45)';
        value1 = 'matrix(0.74285714,0,0,0.74285714,-15,50)';
        value4 = 'matrix(1.07142857,0,0,1.07142857,-50,25)';
        value3 = 'matrix(0.97142857,0,0,0.97142857,-45,20)';
        value0 = 'matrix(1,0,0,1,-45,20)';
    }else{
        value2 = 'matrix(1.71428571,0,0,1.71428571,55,0)';
        value1 = 'matrix(0.74285714,0,0,0.74285714,0,145)';
        value4 = 'matrix(1.07142857,0,0,1.07142857,-55,110)';
        value3 = 'matrix(0.97142857,0,0,0.97142857,-50,95)';
        value0 = 'matrix(1,0,0,1,-50,105)';
    }
    setMatric(topright,value2);
    setMatric(topleft,value1);
    setMatric(bottomleft,value4);
    setMatric(bottomright,value3);
    setMatric(center,value0);

    var explain = topright.next();
    showExplain(2,explain,true);
}
var bottomrightAction = function(){
    var value0,value1,value2,value3,value4;
    if(smallMedia){
        value3 = 'matrix(1.37142857,0,0,1.37142857,15,0)';
        value2 = 'matrix(0.92857143,0,0,0.92857143,-43,-40)';
        value1 = 'matrix(0.85714286,0,0,0.85714286,-20,-30)';
        value4 = 'matrix(1.21428571,0,0,1.21428571,-55,-25)';
        value0 = 'matrix(1,0,0,1,-30,-45)';
    }else{
        value3 = 'matrix(1.37142857,0,0,1.37142857,0,-25)';
        value2 = 'matrix(0.92857143,0,0,0.92857143,-75,-80)';
        value1 = 'matrix(0.85714286,0,0,0.85714286,-40,-65)';
        value4 = 'matrix(1.21428571,0,0,1.21428571,-95,-60)';
        value0 = 'matrix(1,0,0,1,-70,-85)';
    }
    setMatric(bottomright,value3);
    setMatric(topright,value2);
    setMatric(topleft,value1);
    setMatric(bottomleft,value4);
    setMatric(center,value0);

    var explain = bottomright.next();
    showExplain(3,explain,true);
}
var bottomleftAction = function(){
    var value0,value1,value2,value3,value4;
    if(smallMedia){
        value4 = 'matrix(1.71428571,0,0,1.71428571,-35,50)';
        value3 = 'matrix(0.74285714,0,0,0.74285714,5,-50)';
        value2 = 'matrix(1.07142857,0,0,1.07142857,40,-30)';
        value1 = 'matrix(0.97142857,0,0,0.97142857,35,-20)';
        value0 = 'matrix(1,0,0,1,35,-20)';
    }else{
        value4 = 'matrix(1.71428571,0,0,1.71428571,-20,5)';
        value3 = 'matrix(0.74285714,0,0,0.74285714,35,-140)';
        value2 = 'matrix(1.07142857,0,0,1.07142857,90,-105)';
        value1 = 'matrix(0.97142857,0,0,0.97142857,85,-90)';
        value0 = 'matrix(1,0,0,1,70,-95)';
    }
    setMatric(bottomleft,value4);
    setMatric(bottomright,value3);
    setMatric(topright,value2);
    setMatric(topleft,value1);
    setMatric(center,value0);

    var explain = bottomleft.next();
    showExplain(4,explain);
}
var videosInit = function(){
    //step1
    topleft.mouseenter(function(){
        reset();
        //start($(this)[0]);
        topleftAction();
    });
    //step2
    topright.mouseenter(function(){
        reset();
        //start($(this)[0]);
        toprightAction();
    });
    //step3
    bottomright.mouseenter(function(){
        reset();
        //start($(this)[0]);
        bottomrightAction();
    });
    //step4
    bottomleft.mouseenter(function(){
        reset();
        //start($(this)[0]);
        bottomleftAction();
    });

    //reset all
    $('.video-item>img').each(function(){
        $(this).mouseleave(function(){
            //stop($(this)[0]);
            reset();
        });
    });
}
/**
 * 顶部导航背景变化
 */
var navbar = $('.navbar-default');
var navbarBgChange = function(){
    var toTop = getScrollTop();
    var width = getPageWidth();
    var height;
    if(width <= 992){
        var topBannerHeight = width/1920*995;//头部大背景宽高比
        topBanner.css('height', topBannerHeight);
        mainContent.css('top', topBannerHeight);
        height = topBannerHeight-30;
    }else{
        topBanner.css('height', 'auto');
        mainContent.css('top', '100vmin');
        height = getPageHeight()-70;
    }
    if(toTop < height){
        navbar.removeClass('navbar-white-bg');
        navbar.find('.logo-top').attr('src',imgDir+'logo_black.png');
        navbar.find('.selected').css({backgroundColor: 'rgba(0,0,0,.3)'});
    }else if(toTop >= height){
        navbar.addClass('navbar-white-bg');
        navbar.find('.logo-top').attr('src',imgDir+'logo_white.png');
        navbar.find('.selected').css({backgroundColor: 'transparent'});
    }

}
/**
 * 底部图片轮播
 */
$('#carousel-example-generic').on('slide.bs.carousel', function (data) {
    var length = data.length;
    var cur = data.cur;//即将播放的图:0~(length-1)
    var prev = (cur==0) ? (length-1) : (cur-1);
    var next = (cur==length-1) ? 0 : (cur+1);
    controlLeftBg = 'background: url("'+$(carouselItemImgs[prev]).attr('src')+'") top right;';
    controlRightBg = 'background: url("'+$(carouselItemImgs[next]).attr('src')+'") top left;';
    var width = getPageWidth();
    if(width > 1180){
        controlLeft.attr('style',controlLeftBg);
        controlRight.attr('style',controlRightBg);
    }
})
/**
 * 安全保障服务 图标变化
 */
var securityIcons = security.find('div.item-svg>svg');
var black = '#55555D';
var white = '#FFF';
securityIcons.on('mouseover',function(){
    var toBlack = $(this).find('.svg-to-black');
    var toWhite = $(this).find('.svg-to-white');
    toWhite.css({'fill': white});
    toBlack.css({'fill': black});
})
securityIcons.on('mouseout',function(){
    var toBlack = $(this).find('.svg-to-black');
    var toWhite = $(this).find('.svg-to-white');
    toBlack.css({'fill': white});
    toWhite.css({'fill': black});
})
/**
 * 页面响应变化
 */
$(function(){
    //头部导航背景
    navbarBgChange();
    var width = getPageWidth();
    //底部图片轮播
    if(width >= 992){
        if(width <= 1180){
            var bottomHeight = width/1600*900;
            carousel.css('height', bottomHeight);
            controlImg.css('margin-top', bottomHeight/2-35.5);
            controlLeft.removeAttr('style');
            controlRight.removeAttr('style');
        }else{
            var bottomHeight = width*0.8/1600*900;
            carousel.css('height', bottomHeight);
            controlImg.css('margin-top', bottomHeight/2-35.5);
        }
    }
    //小屏 视频变小
    if(width <= 768){
        smallMedia = true;
    }else{
        smallMedia = false;
    }
    //视频初始化
    videosInit();
});
$(window).on('scroll',function(){
    //首页
    navbarBgChange();
    //小于 768px 视频列表自适应
    var width = getPageWidth();
    if(width <= 768){
        smallMedia = true;
    }else{
        smallMedia = false;
    }
})
$(window).on('resize',function(){
    navbarBgChange();
    var width = getPageWidth();
    //底部图片轮播
    if(width >= 992) {
        if (width <= 1180) {
            bottomHeight = width / 1600 * 900;
            carousel.css('height', bottomHeight);
            controlImg.css('margin-top', bottomHeight / 2 - 35.5);
            controlLeft.removeAttr('style');
            controlRight.removeAttr('style');
        } else {
            bottomHeight = width * 0.8 / 1600 * 900;
            carousel.css('height', bottomHeight);
            controlImg.css('margin-top', bottomHeight / 2 - 35.5);
            controlLeft.attr('style', controlLeftBg);
            controlRight.attr('style', controlRightBg);
        }
    }
})



